import React, { Component } from 'react';
import { SwipeAction } from 'antd-mobile';
import _ from 'lodash';
import {
  View,
  Text,
  Image,
  SectionList,
  Alert,
  TouchableOpacity,
} from 'react-native';
import { phonecall, text } from 'react-native-communications';
import Icon from 'react-native-vector-icons/Feather';
import GenderIcon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';
import { age, genderIconProps } from '../../../utils';
import styles from './style';
import Star from '../../../components/star';
import NoneData from '../../../components/noneData';
import Button from '../../../components/Button';
import { getSmsTemplate } from '../../../common/services/user'

const alert = Alert.alert;

const faceDefault = require('../../../access/face.png');

const sentSms = (mobile) => {
  storage.load({ key: 'smsTemplate' }).then(data => {
    text(mobile, data)
  }).catch(() => {
    getSmsTemplate().then(data => {
      if (data) {
        text(mobile, data)
      } else {
        text(mobile, '')
      }
    })
  })

}

/* 列表单项 */
export const Item = ({ data, style, remove }) => {
  const right = [
    {
      text: '短信',
      onPress: () => sentSms(data.mobile),
      style: { backgroundColor: '#3399ff', color: '#fff' }
    },
    {
      text: '电话',
      onPress: () => phonecall(data.mobile, false),
      style: { backgroundColor: '#33cc33', color: '#fff' }
    }
  ];
  const { name, gender, genderName, birthday, stars, valuePoint, customerId, intimateDegree } = data;
  const onPress = (customerId) => {
    Actions.customerDetail({ customerId });
  };
  const removeCustomer = (customerId) => {
    alert('删除客户', `您确定要删除客户${name}吗 ?`, [
      { text: '取消', onPress: () => { } },
      {
        text: '删除', onPress: () => {
          remove(customerId);
        }, style: { color: '#f00' }
      }
    ])
  }
  const left = [
    {
      text: '删除',
      onPress: () => removeCustomer(customerId),
      style: { backgroundColor: '#f00', color: '#fff' }
    },
  ];
  const iconProps = genderIconProps(gender)
  return (
    <SwipeAction right={right} left={left} style={style} autoClose>
      <TouchableOpacity onPress={() => onPress(customerId)} style={styles.item}>

        <View
          style={[
            styles.avatarView,
            { backgroundColor: iconProps.color}
          ]}
        >
          <GenderIcon name={iconProps.name} size={20} color="#fff" />
        </View>
        <View style={styles.itemText}>
          <View style={styles.itemTextTop}>
            <Text style={styles.itemTextName}>{name}</Text>
            <Text style={styles.itemTextInfo}>
              {genderName} {age(birthday)}
            </Text>
          </View>
          {/* <Star data={intimateDegree / 50} size={12} /> */}
        </View>
        <View style={styles.point}>
          <Text>{valuePoint}</Text>
        </View>
      </TouchableOpacity>
    </SwipeAction>
  );
};

export const keyExtractor = item => item.customerId.toString();
export const renderItem = ({ item, index }) => {
  return <Item data={item} style={styles.listWrap} />;
};

export default class List extends Component {
  submitHandle = value => {
    const keyword = _.trim(value);
    if (keyword && this.props.search) {

      this.props.search(keyword);
    }
  };
  sectionData = () => {
    const { data } = this.props;
    return _.map(data.slice(), ({ data: d, ...other }) => ({ data: d.slice(), ...other }));
  };
  onRefresh = () => {
    this.props.refresh();
  };
  render() {
    return (
      <View style={styles.customerListWrap}>
        <View style={styles.searchBar}>
          <Button
            title="根据客户姓名或手机号查询"
            icon={<Icon name="search" size={16} color="#999" />}
            size="small"
            style={{
              borderWidth: 1,
              borderColor: '#ddd',
              backgroundColor: '#f5f5f5'
            }}
            onPress={() => Actions.customerSreach()}
          />
          {/* <SearchBar
            placeholder="按客户姓名/手机号搜索"
            onSubmit={this.submitHandle}
          /> */}
        </View>
        {this.props.data.length > 0 ? (

          <SectionList
            style={styles.customerListItem}
            onRefresh={this.onRefresh}
            refreshing={this.props.loading}
            renderSectionHeader={({ section: { title } }) => {
              return <Text style={styles.sectionTitle}>{title}</Text>
            }}
            sections={this.sectionData()}
            renderItem={({ item, index }) => {
              return <Item data={item} remove={this.props.remove} style={styles.listWrap} />;
            }}
            keyExtractor={keyExtractor}
          />
        ) : (
            <NoneData />
          )}
      </View>
    );
  }
};
